<template>
  <div>
    <div class="mode-right">
      <div class="breadcrumbs">
        <span>
          <router-link :to="{ path: '/' }">{{ $t('menu.ARKProject') }}</router-link>
          > <span v-if="project.state===1">
                  {{ $t('state.live') }}

                </span>
                <span v-else-if="project.state===0">
                   {{ $t('state.oncoming') }}
                </span>
                <span v-else-if="project.state === 2">
                  {{ $t('state.completed') }}
                </span>
                 ></span>
        {{ project.title }}
      </div>
      <div class="right-body">
        <div class="detaileBox clearfix">
          <div class="detaile-con">
            <div class="banner">
              <img :src="project.bgimg" v-if="project.bgimg" style="max-height: 250px" alt=""/>
              <div class="banner-pos">
                <h1>{{ project.title }}</h1>
                <p>{{ project.subtitle }}</p>
                <p>
                                    {{ project.intro }}
                </p>
                <div class="pos-share">
                  <ul>
                    <li v-for="(link,index) in project.links" :key="index">
                      <a :href="link.href" :name="link.title">
                        <img :src="link.icon" alt=""/>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="detaile-main">
              <!--            <h1 class="title">What is PRIMAL (PRIMAL)?</h1>-->
              <div class="info" v-for="(content,index) in project.contents" :key="index">
                <h1 class="title" :id="'main_'+content.id">{{ content.title }}</h1>
                <p v-html="content.content">
                  <!--                  {{ content.content }}-->
                </p>
              </div>
            </div>
          </div>
          <!--          右侧-->
          <div class="detaile-nav">
            <div class="det-check">
              <div class="detaile-tab-card tab-card1 in">
                <div class="card-tag " v-if="project.state===1">
                  {{ $t('state.live') }}
                </div>
                <div class="card-tag tag-color1" v-else-if="project.state===0">
                  {{ $t('state.oncoming') }}
                </div>
                <div class="card-tag tag-color2" v-else-if="project.state === 2">
                  {{ $t('state.completed') }}
                </div>
                <div class="card-tag tag-color2" v-else>
                  {{ $t('state.end') }}
                </div>
                <div class="det-head-top">
                  <div class="title">
                    <h1> {{ project.title }}</h1>
                    <p>({{ project.subtitle }})</p>
                  </div>
                  <div class="logo">
                    <img width="33" height="33" :src="project.icon" alt="">
                  </div>
                </div>
                <div class="det-con-info">
                  <h1 class="title">{{ $t('detail') }}</h1>
                  <div class="det-flex">
                    <span>{{ $t('type') }}: </span>
                    <span class="det-tips">
                          <img src="@/assets/images/tips.png" alt=""/>
                          <div class="tips-box">
                            <p>{{ $t('typeDescription') }}</p>
                            <span class="just-top"></span>
                          </div>
                        </span>
                  </div>
                  <!--                  <h1>{{ project.transaction.type ||"type" }}</h1>-->
                  <h1>lexdxxx</h1>
                  <div class="det-flex-th clearfix">
                    <div class="item" v-if="project.transaction.qfmax">
                      <div class="det-flex margin-btm" >
                        <span>{{ $t('qfMax') }}: </span>
                        <span class="det-tips">
                              <img src="@/assets/images/tips.png" alt=""/>
                              <div class="tips-box">
                                <p>Slippage Tolerance</p>
                                <span class="just-top"></span>
                              </div>
                            </span>
                      </div>
                      <div class="det-flex">
                        <h2 >{{ project.transaction.qfmax }}</h2>
                        <span>{{ $store.state.currency }}</span>
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('qfAmount') }}: </span>
                        <span class="det-tips">
                              <img src="@/assets/images/tips.png" alt=""/>
                              <div class="tips-box">
                                <p>Slippage Tolerance</p>
                                <span class="just-top"></span>
                              </div>
                            </span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.qfamount | cutOutNum }}</h2> 
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('targetRaise') }}: </span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.tagetraise | cutOutNum }}</h2>
                        <span>{{ project.transaction.convertunit }}</span>
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('swapRate') }}:</span>
                        <span class="det-tips">
                              <img src="@/assets/images/tips.png" alt=""/>
                              <div class="tips-box">
                                <p>Slippage Tolerance</p>
                                <span class="just-top"></span>
                              </div>
                            </span>
                      </div>
                      <div class="det-flex">
                        <h2>1</h2> <span>{{ project.transaction.convertunit }}</span> <span>=</span>
                        <h2>{{ project.transaction.swaprate | cutOutNum }}</h2>
                        <span>{{ project.transaction.tokeninformation.tokensymbol }}</span>
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('salePrice') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>${{ project.transaction.saleprice }}</h2>
                      </div>
                    </div>
                  </div>
                  <div class="det-flex det-time">
                    <span>{{ $t('startDateTime') }}:</span>
                    <h2>{{ project.transaction.startin }}</h2>
                    <span>UTC</span>
                  </div>
                  <div class="det-flex det-time">
                    <span>{{ $t('endDateTime') }}:</span>
                    <h2>{{ project.transaction.closein }}</h2>
                    <span>UTC</span>
                  </div>
                  <!-- Token information -->
                  <div class="det-flex-th det-has-title clearfix">
                    <h1 class="title">{{ $t('tokenInformation') }}</h1>
                    <div class="item item1">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('shortName') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.tokeninformation.shortname }}</h2>
                      </div>
                    </div>
                    <div class="item item2">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('tokenSymbol') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.tokeninformation.tokensymbol }}</h2>
                      </div>
                    </div>
                    <div class="item item3">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('salePrice') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.saleprice }}</h2> <span>USD</span>
                      </div>
                    </div>
                    <div class="item item4">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('totalSuppt') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.tokeninformation.totalsuppt| cutMoneyFiter }}</h2>
                      </div>
                    </div>
                    <div class="item item5">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('contractAddress') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.tokeninformation.conaddress }}</h2>
                      </div>
                    </div>
                    <div class="item item6">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('netWork') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.tokeninformation.network }}</h2>
                      </div>
                    </div>
                  </div>
                  <!-- 进度条 -->
                  <div class="progress">
                    <div class="pro-tw">
                      <span>{{ $t('progress') }}</span>
                      <span>{{ $t('participants') }}: {{ project.transaction.participants }}</span>
                    </div>
                    <div class="pro-con">
                      <div class="pro-box">
                        <!--                        {{project.transaction.standpercent}}-->
                        <div class="pro-num" :style="{width: `${project.transaction.standpercent}%`}"></div>
                      </div>
                    </div>
                    <div class="pro-btm">
                      <span>{{ project.transaction.standpercent }}%</span>
                      <span>{{ $t('fundRaise') }}:≈{{ project.transaction.fundraise |cutOutNum }} ARK</span>
                    </div>
                  </div>
                  <!-- 按钮 -->
                  <div class="det-btn" :class="['det-btn-'+project.state]" @click="handleBuy">
                    {{ $t("participate") }}
                  </div>
                  <p class="det-btm-tips">{{ $t('howToParticipate') }}?</p>
                </div>
              </div>
              <div class="detaile-tab-card tab-card2 out">
                <div class="card-tag " v-if="project.state===1">
                  {{ $t('state.live') }}
                </div>
                <div class="card-tag tag-color1" v-else-if="project.state===0">
                  {{ $t('state.oncoming') }}
                </div>
                <div class="card-tag tag-color2" v-else-if="project.state === 2">
                  {{ $t('state.completed') }}
                </div>
                <div class="card-tag tag-color2" v-else>
                  {{ $t('state.end') }}
                </div>
                <div class="det-head-top">
                  <div class="title">
                    <h1>{{ project.title }}</h1>
                    <p>({{ project.subtitle }})</p>
                  </div>
                  <div class="logo">
                    <img width="33" height="33" src="@/assets/images/pop-icon.png" alt="">
                  </div>
                </div>
                <div class="det-con-info">
                  <div class="det-flex det-span">
                    <span>{{ $t('idoEndsIn') }}</span>
                  </div>
                  <h1>{{ endIn.days }}{{ $t('day') }} {{ endIn.hours }}{{ $t('hour') }} {{ endIn.minutes }}
                    {{ $t('minute') }} {{ endIn.seconds }}{{ $t('second') }}</h1>
                  <div class="det-flex-th clearfix">
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('targetRaise') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>{{ project.transaction.tagetraise | cutOutNum }}</h2> <span>ARK</span>
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('qfMax') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2 v-if="project.transaction.qfmax">{{ project.transaction.qfmax | cutOutNum }}</h2>
                        <span>ARK</span>
                      </div>
                    </div>
                    <div class="item" v-if="selectToken.currency ==='ARK'">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('swapRate') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2>1</h2> <span>ARK</span> <span>=</span>
                        <h2 v-if="project.transaction.swaprate">{{ project.transaction.swaprate | cutOutNum }}</h2>
                        <span v-if=" project.transaction.tokeninformation.tokensymbol">{{
                            project.transaction.tokeninformation.tokensymbol
                          }}</span>
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('salePrice') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2 v-if="project.transaction.saleprice">${{ project.transaction.saleprice }}</h2>
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('fundRaise') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2 v-if="project.transaction.fundraise">≈{{ project.transaction.fundraise | cutOutNum }}</h2>
                        <span>ARK</span>
                      </div>
                    </div>
                    <div class="item">
                      <div class="det-flex margin-btm">
                        <span>{{ $t('qfAmount') }}:</span>
                      </div>
                      <div class="det-flex">
                        <h2 v-if="project.transaction.qfamount">≈{{ project.transaction.qfamount | cutOutNum }}</h2>
                        <span>ARK</span>
                      </div>
                    </div>
                  </div>
                  <div class="select-tt">
                    <span class="tt-style tt-left">{{ $t('from') }}</span>
                    <span class="tt-style tt-right">{{ $t('price') }}:52.21USDC</span>
                  </div>
                  <div class="select-li1">
                    <div class="li1-left">
                      <div class="selectBox" @click="showSelectBoxCon=!showSelectBoxCon">
                        <img v-if="selectToken.icon" :src="selectToken.icon" width="12" height="12" alt=""/>
                        <span v-if="selectToken.currency">{{ selectToken.currency }}</span>
                        <img src="@/assets/images/down.png" alt=""/>
                      </div>
                      <!--                      积分类型弹窗-->
                      <transition appear name="bounce"
                                  enter-active-class="fadeInDown"
                                  leave-active-class="fadeOutUp">
                        <div class="select-box-con" v-show="showSelectBoxCon">
                          <div class="box-head">
                            <h1>{{ $t('selectAToken') }}</h1>
                            <img class="box-close" src="@/assets/images/close.png"
                                 @click="showSelectBoxCon=!showSelectBoxCon" alt=""/>
                          </div>
                          <div class="box-main">
                            <ul class="clearfix">
                              <li v-for="con in tokenList" :key="con.id" @click="changeTokenType(con)">
                                <a>
                                  <img :src="con.icon" width="15" height="15" alt=""/>
                                  {{ con.currency }}
                                </a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </transition>
                      <p>{{ $t('balance') }}：{{ $store.state.wallet.balance | cutOutNum }}</p>
                    </div>

                    <div class="li1-right">
                      <input type="number" max="9999999" min="99" :placeholder="$t('tips.inputBuyCount')"
                             v-model="submitOrder.count"/>
                      <h3>MAX</h3>
                    </div>
                  </div>

                  <div class="select-tt">
                    <span class="tt-style tt-left">{{ $t('youWillRecieveTo') }}</span>
                  </div>
                  <div class="select-li1">
                    <div class="li1-left">
                      <div class="selectBox1">
                        <img src="@/assets/images/pop-icon.png" width="12" height="12" alt=""/>
                        <span>{{ project.transaction.tokeninformation.tokensymbol }}</span>
                      </div>
                    </div>
                    <div class="li1-right">
                      <h1>{{ recieveToNum }}</h1>
                    </div>
                  </div>
                  <div class="gr-info" style="width: 95%">
                    <p>Type:FCFS(Matching funding)</p>
                    <div class="f-info-t">
                      <p>Soft cap:1000ARK</p>
                      <p>Hard cap:100ARK</p>
                    </div>
                    <div class="f-info-t">
                      <p>Network Fee :0.25%</p>
                      <p><a href="javascript:void(0);">Address:39djah*****3j9jh</a></p>
                    </div>
                  </div>
                  <!-- 按钮 -->
                  <div class="det-btn1" @click="handledBuyOk">
                    {{ $t('purchase') }}
                  </div>
                  <!-- 进度条 -->
                  <div class="progress">
                    <div class="pro-tw">
                      <span>{{ $t('progress') }}</span>
                      <span>{{ $t('participants') }}: {{ project.transaction.participants }}</span>
                    </div>
                    <div class="pro-con">
                      <div class="pro-box">
                        <div class="pro-num" :style="{width: `${project.transaction.standpercent}%`}"></div>
                      </div>
                    </div>
                    <div class="pro-btm">
                      <span>{{ project.transaction.standpercent }}%</span>
                      <span>{{ $t('fundRaise') }}:≈{{ project.transaction.fundraise |cutOutNum }} ARK</span>
                    </div>
                  </div>
                  <p class="det-btm-tips">{{ $t('howToParticipate') }}?</p>
                </div>
              </div>
            </div>
            <div class="det-con-nav">
              <ul>
                <li class="nav-list li1" v-for="(content,index) in project.contents" :key="index">
                  <a @click="meuns(content.id)">{{ content.title }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import $ from 'jquery'
import {createOrder, getProject} from "@/requests/api";
import {cutMoneyFiter, cutOutNum} from "@/utils/defined";
import mixins from "@/mixins";
import {Message} from "element-ui";

export default {
  name: `detail`,
  mixins: [mixins],
  components: {
  },
  data() {
    return {
      projectid: '',
      project: {
        transaction: {
          state: 0,
          type: "0",
          name: '',
          qfmax: 1000,
          tokeninformation: {
            name: ''
          }
        }
      },
      endSeconds: 0,
      endIn: {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      },
      //项目可用积分类型
      tokenList: [],
      // 预选使用积分钱包
      selectToken: {
        id: '1',
        name: 'ARK',
        currency: "ARK",
        icon: require('@/assets/images/pop-icon.png')
      },
      // 购买提交数据
      submitOrder: {
        projectid: '',
        wellettype: this.$store.state.wallet.currency,
        count: 10000.00
      },
      showSelectBoxCon: false,
      showStep1: false,
      showStep2: false,
      showStep3: false,
      showStep4: false,
    }
  },
  mounted() {
    // 接受项目id
    const projectId = this.$route.params.id;
    this.projectid = projectId
    this.submitOrder.projectid = projectId
    this.getDetail(projectId)
  },
  filters: {
    cutOutNum,
    cutMoneyFiter,
    num(n) {
      return n < 10 ? '0' + n : '' + n
    },
  },
  methods: {
    changeLanguage() {
      return this.$store.state.language;
    },
    // 获取项目明细
    getDetail(projectid) {
      const query = {
        projectid
      }
      console.log(query)
      getProject(query).then((r) => {
        const {data} = r;
        // console.log("project", data)
        this.project = data;
        this.endSeconds = data.transaction.endin || 0;
        this.add(); //开始执行倒计时显示
      }).catch((e)=>{
        console.log(e);
        // this.$router.history.go(-1)
      })
    },
    // 预选积分类型
    changeTokenType(token) {
      this.selectToken = token;
      this.showSelectBoxCon = false;
    },
    // 点击参与按钮
    handleBuy() {
      if (this.project.state !== 1) {
        Message.error(this.$t('dialog.projectNotParticipation'))
      } else {

        // 判断钱包是否连接
        if (this.$store.state.wallet) {
          const wallet = this.$store.state.wallet;
          // 初始化提交参数
          this.submitOrder.wellettype = wallet.currency;
          this.tokenList.push({
            id: wallet.id,
            name: wallet.name,
            currency: wallet.currency,
            icon: require('@/assets/images/pop-icon.png')
          })
          this.selectToken = {
            id: wallet.id,
            name: wallet.name,
            currency: wallet.currency,
            icon: require('@/assets/images/pop-icon.png')
          }
          console.log(wallet);
          $(".tab-card1").removeClass("in").addClass("out").hide();
          $(".tab-card2").removeClass("out").addClass("in").show();
        } else {
          Message.warning(this.$t('dialog.pleaseConnectWallet'))
        }
      }
    },
    handledBuyOk() {
      this.showStep1 = true
      // $(".tab-card1").removeClass("out").addClass("in").show();
      // $(".tab-card2").removeClass("in").addClass("out").hide();
    },
    //确认购买份额
    approve(willCount) {
      this.submitOrder.count = willCount;
      this.showStep1 = false
      this.showStep2 = true
      // console.log('确认购买份额：'+willCount)
    },
    // 确认提交
    onSwap() {
      this.showStep2 = false
      this.showStep3 = true;
      this.submitOrderToServer()
      // console.log('确认购买份额：'+willCount)
    },
    submitOrderToServer() {
      console.log(this.submitOrder)
      this.submitOrder.transactionamount = this.submitOrder.count;
      createOrder(this.submitOrder).then(() => {
        this.showStep3 = false
        this.showStep4 = true
      })
    },
    meuns(id) {
      let pageId = document.querySelector("#main_" + id);
      window.scrollTo({
        top: pageId.offsetTop, //y 上线
        left: 0,//x 左右
        behavior: 'smooth',//属性值：默认值auto（相当于instant）、平滑滚动smooth、瞬间滚动instant
      });
    },

    // 倒计时函数
    add() {
      const timer = setInterval(() => {
        this.endSeconds -= 1000;
        this.setSeconds(this.endSeconds)
        if (this.endSeconds < 1)
          clearInterval(timer);
      }, 1000)
    },
    //将秒数转换为天时分秒格式
    setSeconds(time) {
      // 总秒数
      var second = Math.floor(time / 1000);
      // 天数
      var day = Math.floor(second / 3600 / 24);
      // 小时
      var hr = Math.floor(second / 3600 % 24);
      // 分钟
      var min = Math.floor(second / 60 % 60);
      // 秒
      var sec = Math.floor(second % 60);
      // 作为返回值返回
      this.endIn.days = day
      this.endIn.hours = hr
      this.endIn.minutes = min
      this.endIn.seconds = sec
      // console.log(this.endIn)
      // 传入用户输入的数据
    }
  },
  watch: {
      changeLanguage: {
        handler(nval, oval) {
          console.log("预览页面languageChange",nval, oval);//nval改变后的新数据，oval改变前的旧数据
          this.getDetail(this.projectid)
        },
        deep: true, // 深度监听
        immediate: true,//立即执行
      }
  },
  computed: {
    // 即将得到积分
    recieveToNum() {
      if (this.submitOrder.count > 0) {
        // 1.如果选择钱包类型是ARK，则使用比例兑换
        // 2.如果选择钱包类型是非ARK则使用销售价格
        if (this.selectToken.id === '1') {
          return (this.submitOrder.count * this.project.transaction.swaprate).toFixed(5)
        } else {
          return (this.submitOrder.count / this.project.transaction.saleprice).toFixed(5)
        }

      } else
        return 0
    }
  }
}
</script>

<style scoped>
.show {
  display: block;
}

.disabledBtn {
  background-color: #6C6C6C;
}

</style>
